<template>
  <el-row class="device-container">
    <el-col :span="10" >
       <ft-table 
        :data="tags"
        :columns="columns1"
        has-check
        pagination
        :page-size="page1.size"
        :page-num="page1.page"
        :total="page1.total"
        layout="total, prev, pager, next, jumper"
        @current-change="page1CurrentChange"
        @selection-change="tagsChange"
      ></ft-table>
    </el-col >
     <el-col :span="4" class="button-group">
        <el-button type="primary" :disabled="selectedTags.length<1" @click="bindTag">绑定tag <i class="el-icon-arrow-right"></i></el-button>
        <el-button type="primary" :disabled="selectedUserDeviceTags.length<1" @click="unBindTag" icon="el-icon-arrow-left">解绑tag </el-button>
     </el-col>
     <el-col :span="10">
        <ft-table
        :data="userDeviceTags"
        :columns="columns2"
        has-check
        pagination
        :page-size="page2.size"
        :page-num="page2.page"
        :total="page2.total"
        layout="total, prev, pager, next, jumper"
        @current-change="page2CurrentChange"
        @selection-change="userDeviceTagsChange"
      ></ft-table>
     </el-col>
  </el-row>
</template>
<script>
import {getTagApi,getUserDeviceTagApi, bindUserDeviceTagApi, unbindUserDeviceTagApi} from '@/api/user.js';
// import {mapGetters} from 'vuex';

export default {
  name: 'user',
  props: {
    user: Object,
    gatewayId: String
  },
  data(){
    return {
      tags: [],
      userDeviceTags: [],
      selectedTags: [],
      selectedUserDeviceTags: [],
      columns1: [
        {prop: 'name', label: 'TAGNAME', align: 'center'},
      ],
      columns2: [
        {prop: 'tag_name', label: 'TAGNAME', align: 'center'},
      ],
      page1: {
        page: 1,
        size: 20,
        total: 0,
      },
      page2: {
        page: 1,
        size: 20,
        total: 0,
      }
    }
  },
  // computed: {
  //   ...mapGetters(['pageSize'])
  // },
  watch: {
    user: {
      immediate: true,
      deep: true,
      handler(){
        this.getTag();
        this.getUserDeviceTag();
      }
    }
  },

  methods: {
    getTag(){
      getTagApi(this.page1, {}).then(res => {
        if(res.code ==0) {
          this.tags = res.data;
          this.page1.total = res.total;
          console.log(this.page1)
        }
      })
    },
    getUserDeviceTag(){
      getUserDeviceTagApi(this.page2, {user_id: this.user.id}).then(res => {
        if(res.code ==0) {
          this.userDeviceTags = res.data;
          this.page2.total = res.total;
        }
      })
    },

    page1CurrentChange(page){
      this.page1.page = page;
      this.getTag();
    },
    page2CurrentChange(page){
      this.page2.page = page;
      this.getUserDeviceTag();
    },
    bindTag(){
      bindUserDeviceTagApi(this.selectedTags).then(res=>{
          if(res.code ==0){
            this.getUserDeviceTag();
          }
      })
    },
    unBindTag(){
     unbindUserDeviceTagApi(this.selectedUserDeviceTags).then(res=>{
        if(res.code ==0){
            this.getUserDeviceTag();
          }
      })
    },
    tagsChange(tags){
      this.selectedTags = tags.map(item => { return {tag_id: item.id, user_id: this.user.id, tag_name: item.name}});
    },
    userDeviceTagsChange(tags){
      this.selectedUserDeviceTags = tags;
    }
  }

}
</script>
<style lang="scss" scoped>
.button-group{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // height: 50vh;
  > .el-button {
    margin: 10px 0;
  }
}
.el-col-10, .el-col-4 {
  height: calc(70vh - 84px);
}
</style>
